<template>
  <div>
    这是child1组件 - {{ num }} - {{ name }} - {{ age }} - {{ sex }} -
    {{ doubleCount2 }} - {{ oddArr }}
    <button @click="add(2)">+2</button>
    <button @click="add(3)">+3</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
// import { INCREMENT } from "../store/mutationsTypes";

export default {
  data() {
    return {
      a: -1,
      count2: 10,
    };
  },
  // this.$store表示仓库实例
  // 当组件要使用仓库数据的时候，不能用data,要用computed
  // computed: {
  //   num() {
  //     return this.$store.state.count;
  //   },
  //   name() {
  //     return this.$store.state.name;
  //   },
  //   age() {
  //     return this.$store.state.age;
  //   },
  //   sex() {
  //     return this.$store.state.sex;
  //   },
  //   doubleCount2() {
  //     return this.count2 * 2;
  //   },
  // },

  // mapState辅助函数
  // 里面可以接收一个参数, 可以是数组也可以是对象
  // 如果是数组的写法，将仓库的变量映射到组件的计算属性里面
  // computed: mapState(["count", "name", "age", "sex"]),

  // 对象的方式解决了组件的计算属性的名字可以和仓库的变量不重名

  // 如果计算属性里面既有仓库的数据而且用了辅助函数mapState，同时又有自己组件的计算属性，可以使用扩展运算符
  computed: {
    ...mapState({
      num: "count",
      name: (state) => state.name,
      age: (state) => state.age * 2,
      // sex: (state) => state.sex * this.a,
      sex(state) {
        return state.sex * this.a;
      },
      // oddArr: (state) => state.arr.filter((item) => item % 2),
    }),
    ...mapGetters(["oddArr"]),
    doubleCount2() {
      return this.count2 * 2;
    },
    // oddArr() {
    //   return this.$store.getters.oddArr;
    // },
  },

  methods: {
    add(n) {
      // 更多地用上面的写法
      // this.$store.commit("increment", { a: n, b: 999 });
      // 等同于
      // this.$store.commit({
      //   type: "increment",
      //   a: n,
      //   b: 999,
      // });

      this.increment({ a: n, b: 999 });
    },
    // mapMutations是写在methods里面的
    // 将vuex的mutations的函数映射到组件里面的methods里
    ...mapMutations(["increment"]),
  },
};
</script>
